<!-- 
  虚拟长列表的基本原理：

    1. 可视区域的高度固定，每一个列表项的高度固定
    2. 可以基于第一点计算出截取的数组长度
    3. 监听滚动事件，计算新的偏移量 startIndex 与 endIndex

 -->

<template>
  <div>
    <h2>虚拟长列表</h2>
    <RecycleScroller class="list" :items="list" :item-size="50" key-field="id">
      <template #default="{ item }">
        <div class="item">{{ item.label }}</div>
      </template>
    </RecycleScroller>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
// @ts-ignore
// import { RecycleScroller } from "vue-virtual-scroller";
// import "vue-virtual-scroller/dist/vue-virtual-scroller.css";

import RecycleScroller from "./components/RecycleScroller.vue";

const list = ref(
  Array(10000)
    .fill("")
    .map((_, index) => ({
      id: index,
      label: `label_${index}`,
    }))
);
</script>

<style scoped>
.list {
  height: 400px;
  border: 1px solid #000;
  overflow-y: auto;
}

.item {
  padding-left: 16px;
  height: 50px;
  line-height: 50px;
}
</style>
